<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>
  
    <div id="app">
            <div> ct: {{ ct }} </div>
            <button @click="ct++"> ct++</button>
            <hr />
            <div> 个人信息: {{ userInfo }} </div> 
            <button @click="userInfo.age++">age递增</button>
            <div v-show="canEnter"> 小于18岁不得入内 </div>

    </div>

        
    
    <script>
       
       // watch 观察  看
        const app = new Vue({
            el:'#app',
            data:{
                ct: 1,
                userInfo:{
                    name: 'dixon',
                    age: 10
                },
                canEnter: true
            },
            computed:{
                dbCt(){
                    return this.ct * 2
                }
            },
            methods:{},
            watch:{ // 侦听器  监听某个状态的变化 会得到新的值(变化之后的值)  旧的值(变化之前的值)
                ct(newValue,oldValue){
                    console.log('newValue',newValue)
                    console.log('oldValue',oldValue)
                },
                // watch 也能监听到 计算属性的变化
                dbCt(newValue,oldValue){
                    console.log(' dbct newValue',newValue)
                    console.log('dbct oldValue',oldValue)
                },
                // 默认情况下 watch监听的是 指针地址
                // 在这种情况之下是无法直接监听到  仅仅是修改了某个属性的对象的变化
                userInfo(nv,ov){
                    console.log(' userInfo newValue111111111',nv)
                    console.log('userInfo oldValue222222222',ov)
                },

                // 如果需要监听 某个属性的变化 那么可以具体到那个属性
                // 'userInfo.age'(nv,ov){
                //     console.log(' userInfo props age newValue',nv)
                //     console.log(' userInfo props age oldValue',ov)
                //     if(nv > 18) {
                //         this.canEnter = false
                //     } else {
                //         this.canEnter = true
                //     }

                // }

                // 侦听器的另外一种使用方式 就是监听的属性设置为一个配置对象
                userInfo: {
                    // handle
                    handler(nv,ov){
                        console.log(' userInfo newValue', JSON.stringify(nv))
                        console.log('userInfo oldValue',JSON.stringify(ov))
                         
                    },
                    // deep 设为true就可以监听到对象的任意层次的变化
                    deep: true,  // 深度监听  默认值 false 
                    immediate: true, // immediate 立即  
                 }
            
            },
            created(){

                // watch 如果配置了 immediate 实际上监听的是一个属性的从无到有的过程 所以 会先于 created执行
                // create 创建  created 创建完成之后
                console.log('created执行')
            }

        })

        console.log('app',app)



    </script>

</body>
</html>